<template>
    <div style="height: 100%;">
        <div>
            <el-form :inline="true" :model="search" class="demo-form-inline">
                <el-form-item>
                    <el-input v-model="search.name" placeholder="字典编码" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadData">查询</el-button>
                    <el-button type="primary" @click="openDataDicationartDialog">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div style="height: calc(100% - 100px); overflow-y: auto;">
            <el-table :data="tableData" row-key="id" border lazy :load="loadChildren" :key="key"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
                style="width: 100%;">
                <el-table-column prop="code" label="编码" width="180" />
                <el-table-column prop="name" label="名称" width="180" />
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column label="操作" width="160px">
                    <template #default="scope">
                        <el-link size="small" type="primary" @click="editDialog(scope.row)">编辑</el-link>&nbsp;
                        <el-link size="small" type="danger" @click="removeDataDict(scope.row)">删除</el-link>&nbsp;
                        <el-link size="small" v-show="scope.row.hasChildren" type="primary"
                            @click="openChildrenDialog(scope.row)">新增</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="position: absolute;bottom: 0px;">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[1, 10, 20, 30, 50]"
                background small layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="loadData"
                @current-change="loadData" />
        </div>
    </div>

    <!-- 新增字典 -->
    <el-dialog v-model="dataDicationartDialog" width="50%" :align-center="true" @open="openedDataDicationartDialog"
        @close="closedDataDicationartDialog">
        <template #header>
            <span slot="header" class="dialogTitle1">字典</span>
        </template>
        <el-form :model="dataDictionArt" ref="dataDictionArtRef" :rules="dataDictionArtRules" class="demo-ruleForm"
            :inline-message="true">
            <el-form-item label="字典编码" prop="code" :inline-message="true">
                <el-input :disabled="dataDictionArt.id != null" v-model="dataDictionArt.code" placeholder="字典编码"
                    clearable />
            </el-form-item>
            <el-form-item label="字典名称" prop="name">
                <el-input v-model="dataDictionArt.name" placeholder="字典名称" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="dataDicationartDialog = false">取消</el-button>
            <el-button type="primary" @click="saveDataDication">保存</el-button>
        </template>
    </el-dialog>

    <!-- 新增子项字典 -->
    <el-dialog v-model="childrenDataDicationartDialog" width="50%" :align-center="true"
        @close="closeChildrenDataDicationartDialog">
        <template #header>
            <span slot="header" class="dialogTitle1">字典</span>
        </template>
        <el-form :model="childrenDataDicationart" ref="childrenDataDicationartRef" :rules="childrenDataDicationartRules"
            class="demo-ruleForm" :inline-message="true" label-position="right" label-width="120px">
            <el-form-item label="父类" prop="pname" :inline-message="true">
                <el-input disabled v-model="childrenDataDicationart.pname" />
            </el-form-item>
            <el-form-item label="字典数据编码" prop="code" :inline-message="true">
                <el-input :disabled="childrenDataDicationart.id" v-model="childrenDataDicationart.code" placeholder="字典数据编码"
                    clearable />
            </el-form-item>
            <el-form-item label="字典数据名称" prop="name">
                <el-input v-model="childrenDataDicationart.name" placeholder="字典数据名称" clearable />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="childrenDataDicationartDialog = false">取消</el-button>
            <el-button type="primary" @click="saveChildrenDataDicationart">保存</el-button>
        </template>
    </el-dialog>
</template>

<script>
import { ref } from "vue"
export default {
    data() {
        return {
            key: 1,
            search: {},
            currentPage: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            dataDicationartDialog: false,
            dataDictionArt: { name: "", code: "" },
            dataDictionArtRules: {
                code: [{ required: true, message: "必填" }],
                name: [{ required: true, message: "必填" }],
            },
            childrenDataDicationartDialog: false,
            childrenDataDicationart: {},
            childrenDataDicationartRules: {
                name: [{ required: true, message: "必填" }],
            }
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        // 打开子项的dialog
        openChildrenDialog(row) {
            this.childrenDataDicationart.pname = row.name
            this.childrenDataDicationart.datadictCode = row.code
            console.log(row);
            this.childrenDataDicationartDialog = true
        },
        closeChildrenDataDicationartDialog() {
            this.$refs.childrenDataDicationartRef.resetFields()
        },
        saveChildrenDataDicationart() {
            this.$refs.childrenDataDicationartRef.validate(validateor => {
                if (validateor) {
                    this.$axios.post("/dataDictionArt/saveChildrenDataDict", this.childrenDataDicationart).then(({ data }) => {
                        if (data.code == 0) {
                            this.childrenDataDicationartDialog = false
                            this.key++
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }
            })
        },
        loadChildren(tree, treeNode, resolve) {
            console.log(tree, treeNode);
            this.$axios.get(`/dataDictionArt/getDataDictDetails/${tree.code}`).then(({ data }) => {
                if (data.code == 0) {
                    console.log(data.rows);
                    let arr = data.rows.map(x => { return { 'xid': x.id, 'code': x.code, 'name': x.name, pcode: x.datadictCode } })
                    resolve(arr)
                } else {
                    this.$message.error(data.msg)
                }
            })
        },
        loadData() {
            this.$axios.post(`/dataDictionArt/page/${this.currentPage}/${this.pageSize}`, this.search).then(({ data }) => {
                if (data.code == 0) {
                    data.rows.forEach(x => {
                        x.hasChildren = true
                    })
                    this.tableData = data.rows
                    this.total = data.total
                } else {
                    this.$message.error(data.msg)
                }
            })
        },
        openedDataDicationartDialog() {
            this.$refs.dataDictionArtRef.clearValidate()
        },
        openDataDicationartDialog() {
            this.$nextTick(() => {
                this.dataDicationartDialog = true
            })
        },
        closedDataDicationartDialog() {
            console.log(123);
            // if(this.$refs.dataDictionArtRef){
            this.dataDictionArt = { name: "", code: "" }
            this.$refs.dataDictionArtRef.clearValidate()
            // }
        },
        saveDataDication() {
            this.$refs.dataDictionArtRef.validate(validateor => {
                if (validateor) {
                    this.$axios.post("/dataDictionArt/save", this.dataDictionArt).then(({ data }) => {
                        if (data.code == 0) {
                            this.loadData()
                            this.dataDicationartDialog = false
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                }
            })
        },
        editDialog(row) {
            console.log(row);
            if (row.hasChildren) {
                this.dataDictionArt = row
                this.dataDicationartDialog = true
            } else {
                let parent = this.tableData.filter(x => x.code = row.pcode)[0] || {}
                this.childrenDataDicationart = row
                this.childrenDataDicationart.pname = parent.name
                this.childrenDataDicationart.datadictCode = parent.code
                this.childrenDataDicationartDialog = true
            }
        },
        removeDataDict(row) {
            this.$confirm("确认删除？", "删除？").then(() => {
                let methodName = ""
                let params = {}
                if (row.hasChildren) {
                    methodName = "deleteDatadictByCode"
                    params.dataDictCode = row.code
                } else {
                    methodName = "deleteDatadictDetailByCode"
                    params.dataDictCode = row.code
                }
                this.$axios.delete(`/dataDictionArt/${methodName}`, {
                    params: params
                }).then(({ data }) => {
                    if (data.code == 0) {
                        this.loadData()
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            }).catch(() => {

            })
        }
    }
}
</script>
<style scoped>/* @import url(); 引入css类 */</style>